import { useState } from "react";
import { Card, Button, Modal, Input } from "antd";
import {
  LogoutOutlined,
  SearchOutlined,
  UserOutlined,
} from "@ant-design/icons";
import CreateNewChatRoom from "./component/CreateNewChatRoom/CreateNewChatRoom";
import JoinChatRoom from "./component/JoinChatRoom/JoinChatRoom";
import HistoryRoom from "./component/HistoryRoom/HistoryRoom";
import Login from "./Login/Login";
import "./App.css";

function App() {
  const { Meta } = Card;
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
  const [isHistoryOpen, setIsHistoryOpen] = useState(false);

  const [isLogin, setIsLogin] = useState(false);

  const handleOk = () => {};

  const handleCancel = () => {
    setIsCreateModalOpen(false);
    setIsJoinModalOpen(false);
    setIsHistoryOpen(false);
  };

  const handleLoginValue = (value) => {
    setTimeout(() => {
      setIsLogin(value);
    }, 50);
  };

  return (
    <>
      <Login isLogin={isLogin} onLoginStateChange={handleLoginValue} />
      <div className="chat-box">
        <div
          className={
            isLogin
              ? "chat-box-header animate__animated animate__fadeInRight"
              : "chat-box-header animate__animated animate__fadeOutRight"
          }
        >
          <div className="user">
            <UserOutlined style={{ fontSize: "26px", color: "#3777e3" }} />
            &nbsp;
            <p>测试用户</p>
          </div>
          <Input
            placeholder="Basic usage"
            style={{ width: "60%" }}
            suffix={
              <SearchOutlined
                style={{
                  fontSize: "26px",
                  color: "#3777e3",
                  cursor: "pointer",
                }}
              />
            }
          />
          <div className="login-out " onClick={() => setIsLogin(false)}>
            <LogoutOutlined />
            &nbsp;退出登录
          </div>
        </div>
        <div className="chat-box-main">
          <Card
            className={
              isLogin
                ? "animate__animated animate__fadeInLeft"
                : "animate__animated animate__fadeOutLeft"
            }
            // className="animate__animated animate__fadeInLeft"
            onClick={() => setIsCreateModalOpen(true)}
            hoverable
            style={{
              width: "30%",
            }}
            cover={<img alt="example" src="../static/images/sendMsg.png" />}
          >
            <Meta title="创建新房间" style={{ textAlign: "center" }} />
          </Card>
          <Card
            className={
              isLogin
                ? "animate__animated animate__fadeInUp"
                : "animate__animated animate__fadeOutDown"
            }
            // className="animate__animated animate__fadeInDown"
            // className="animate__animated animate__fadeInDown"

            onClick={() => setIsJoinModalOpen(true)}
            hoverable
            style={{
              width: "30%",
            }}
            cover={<img alt="example" src="../static/images/joinMsg.png" />}
          >
            <Meta title="加入房间" style={{ textAlign: "center" }} />
          </Card>
          <Card
            className={
              isLogin
                ? "animate__animated animate__fadeInRight"
                : "animate__animated animate__fadeOutRight"
            }
            // className="animate__animated animate__fadeInRight"
            onClick={() => setIsHistoryOpen(true)}
            hoverable
            style={{
              width: "30%",
            }}
            cover={<img alt="example" src="../static/images/findHistory.png" />}
          >
            <Meta title="查看历史房间" style={{ textAlign: "center" }} />
          </Card>
        </div>
      </div>
      <Modal
        wrapClassName="centered-footer-modal"
        width="40vw"
        centered={true}
        open={isCreateModalOpen}
        mask={false}
        closeIcon={false}
        footer={[]}
      >
        <CreateNewChatRoom onClick={handleCancel} />
      </Modal>
      <Modal
        open={isJoinModalOpen}
        footer={[]}
        wrapClassName="centered-footer-modal"
        mask={false}
        closeIcon={false}
        centered={true}
        width="40vw"
      >
        <JoinChatRoom onClick={handleCancel} />
      </Modal>
      <Modal
        open={isHistoryOpen}
        footer={[]}
        wrapClassName="centered-footer-modal"
        mask={false}
        closeIcon={false}
        centered={true}
        width="40vw"
      >
        <HistoryRoom onClick={handleCancel} />
      </Modal>
    </>
  );
}

export default App;
